<template>
	<el-breadcrumb  style="padding: 30px;">
	   <el-breadcrumb-item>首页</el-breadcrumb-item>
	   <el-breadcrumb-item>大屏状态管理</el-breadcrumb-item>
	   <el-breadcrumb-item>资料播放设置</el-breadcrumb-item>
	</el-breadcrumb>
	<el-button v-loading.fullscreen.lock="loading" class="mb20" @click="add" type="primary">新增</el-button>
	<el-select v-model="selectData" placeholder="请选择">
		<el-option label="全部视频" :value="''"></el-option>
		<el-option label="关于光阳" :value="1"></el-option>
		<el-option label="车型视频" :value="2"></el-option>
		<el-option label="换电视频" :value="3"></el-option>
		<el-option label="车型海报" :value="4"></el-option>
		<el-option label="最新活动" :value="5"></el-option>
	</el-select>
	  
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="title" label="标题" />
		
		
		<el-table-column prop="orders" label="排序" />
		
	
		<el-table-column
	          prop="img"
	          label="图片"
	          width="100"      
	        >
	          <template #default="scope">		  
	              <el-image
	                  style="width: 100px; height: 100px"
	                  :src="ifImgHeader(scope.row.img)"
	                  :preview-src-list="[ifImgHeader(scope.row.img)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column>
			<el-table-column
			      prop="images"
			      label="视频图片"
			      width="100"      
			    >
			      <template #default="scope">		  
			          <el-image
			              style="width: 100px; height: 100px"
			              :src="ifImgHeader(scope.row.images)"
			              :preview-src-list="[ifImgHeader(scope.row.images)]"
			            >
			            </el-image>
			      </template>
			    </el-table-column>
		<el-table-column
		      prop="videos"
		      label="视频"
		      width="300"      
		    >
		      <template #default="scope">		  
		          <video style="width: 100%;" controls="" :src="video+(scope.row.videos)" class="avatar" >
		          </video>
					
		      </template>
		    </el-table-column>	
			<el-table-column
			      prop="type"
			      label="类型"
			      width="100"      
			    >
			      <template #default="scope">		  
			          {{types[scope.row.type]}}
			      </template>
			    </el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index},(x)=>{edites(x)})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
				
				
			</template>
		</el-table-column>
	</el-table>
	 <el-pagination class="mt20" v-model:currentPage="page" @current-change="getData" :page-size="pagesize" background
	 	layout="prev, pager, next" :total="total">
	 </el-pagination>
	<el-dialog   v-model="modalState" title="标题">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="类型"   :label-width="formLabelWidth">		
				
			    <el-radio v-model="form.type" label="1" size="large">关于光阳</el-radio>
			    <el-radio v-model="form.type" label="2" size="large">车型视频</el-radio>
				<el-radio v-model="form.type" label="3" size="large">换电视频</el-radio>
				<el-radio v-model="form.type" label="4" size="large">车型海报</el-radio>
				<el-radio v-model="form.type" label="5" size="large">最新活动</el-radio>
			 </el-form-item>
			<el-form-item label="标题"  prop="title" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="排序"  prop="orders" :label-width="formLabelWidth">
				<el-input v-model="form.orders" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="店名"   :label-width="formLabelWidth" v-show="form.type==5">
				<el-select v-model="shopindex" multiple  placeholder="请选择">
					<el-option v-for="(t,i) in  shoplist" :label="t.name" :value="i"></el-option>
					
				</el-select>
			</el-form-item>
			<el-form-item v-if="form.type!=4&&form.type!=5"  label="视频" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/uploadVideo`"
					:show-file-list="false"
					:on-progress="loadings"
					:data="jm()"
					:on-success="(file)=>{  loading=false;editimgsProps(file,'videos')} ">				
										<video v-if="form.videos" controls="" :src="video+(form.videos)" class="avatar" >
										</video>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
									
			</el-form-item>
           <el-form-item label="图片" :label-width="formLabelWidth">
           	<el-upload class="avatar-uploader" 
			    :action="`${api}/index.php/index/goods/uploadfile`"
				 :data="jm()"
           		:show-file-list="false" 
				:on-success="(file)=>{editImgsProps({file,key:'img'})} ">
           		<img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
           		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
           	</el-upload>
			
           </el-form-item>
		   <el-form-item label="视频图片" :label-width="formLabelWidth">
		   	<el-upload class="avatar-uploader" 
			 :data="jm()"
		   			    :action="`${api}/index.php/index/goods/uploadfile`"
		   		:show-file-list="false" 
		   				:on-success="(file)=>{editImgsProps({file,key:'images'})} ">
		   		<img v-if="form.images" :src="ifImgHeader(form.images)" class="avatar" />
		   		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		   	</el-upload>
		   			
		   </el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
				
			</span>
		</template>
	</el-dialog>
	
</template>

<script >

			
    var loading;
	import QRCode from 'qrcodejs2'
	import moment from "moment"
	import editorWang from '../components/wangEnduit'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components:{
			editorWang
		},
		watch:{
			times(){
				this.form.starttime=this.times[0];
				this.form.endtime=this.times[1];
			},
		},
		data() {
			return {
				shoplist:[],
				shopindex:[],
				pagesize: 10,
				selectData:"",
				loading:null,
				types:{
					1 :"关于光阳",
				    2 :"车型视频",
					3 :"换电视频",
					4 :"车型海报",
					5 :"最新活动",
				},
				video:"http://gyyjggadmin.hansn.cn/uploads/avatar/",
				viewarr:[],
				modalStatewins:false,
				hdqtxmname:"",//     名称
				hdorders :"",//   加排序
				numbers :"",//  手机
				modalStatewin:false,
				qrcode:null,
				modalStatecode:false,
				vtimes:['',''],
				formLabelWidth: '120px',
				times:"",
				form: {
					title:"",
					img:"",
					videos:"",
					images:"",
					type:"1",
					orders:"",
					llqsjs:null,
					ip:"",
					shopname:""
					
				},
				tableData:[],
				rules: {
				        
						
						
				},
				pid: []
			}
		},
		mounted() {
			
			 
			this.getData();		
		},
		methods: {
			
			loadings(e){
		      if(e.percent!=100){
				  this.loading=true;
			  }else{
				  this.loading=false;
			  }
			},
			edites(data){
				
				if(data.row.llqsjs){
					
					this.shopindex=[];
					this.shoplist.forEach((t,i)=>{
						if(data.row.llqsjs.some(ts=>ts==t.llqsjs)){
							this.shopindex.push(i);
						}
					})
				}
				
				// data.row.is_show=data.row.is_show+'';
				// delete data.row.ewmid;
				// var data =JSON.parse(JSON.stringify(data.row))
				// this.times=[data.starttime,data.endtime];	
			},
			
           
			getData() {
				this.$http.post("/index.php/index/Goods/bannerseach",{type:this.selectData,page:this.page,pagesize:10}).then(data => {
					console.log(data)
					this.tableData=data[0];
                    this.total=data[1];
				})
				this.$http.post("/index.php/index/goodses/shopnamelist").then(data=>{
					this.shoplist=data
				})
			},
			submit(ref) {
				console.log(this.shopindex)
			
				if(this.form.type==5){
					let arrtype=Object.values(this.shopindex)
					console.log(arrtype)
					this.form.shopname="";
					this.form.ip="";
					this.form.llqsjs=this.shoplist.map((t,i)=>{if(arrtype.some(t=>t==i)){
						return t.llqsjs
					}}).filter(t=>t!=null).join(",");
					
					 //[this.shopindex].llqsjs
					 console.log(this.form.llqsjs)
				}else{
					this.form.llqsjs=null;
				}
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					
					this.$http.post(this.id ? '/index.php/index/Goods/banneredit' :
					  "/index.php/index/goods/banneradd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/goods/bannerdel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
